<template>
    <div>
        <div class='container'>
            <div style='margin-bottom: 20px'>
                <el-button type='primary' @click='handleBatchDelete()'>批量删除</el-button>
            </div>
            <el-table
                :data='tableData'
                style='width: 100%;
            margin-bottom: 20px;'
                row-key='id'
                border
                default-expand-all
                @selection-change='handleSelectionChange'
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <el-table-column v-if='false'
                                 prop='id'
                                 label='id'
                                 sortable>
                </el-table-column>
                <el-table-column
                    prop='sort'
                    label='排序'
                    v-if='false'
                    width='180'>
                </el-table-column>
                <el-table-column
                    prop='label'
                    label='菜单名称'
                    sortable
                    width='180'>
                </el-table-column>
                <el-table-column
                    prop='desc'
                    label='菜单描述'
                    sortable
                    width='180'>
                </el-table-column>
                <el-table-column
                    prop='url'
                    label='菜单URL'
                    width='300'
                >
                </el-table-column>
                <el-table-column
                    prop='icon'
                    label='菜单图标'
                    sortable>
                </el-table-column>

                <!--工具栏-->
                <el-table-column label='操作' width='260' align='center'>
                    <template slot-scope='scope'>
                        <el-button
                            v-if='scope.row.id==0||scope.row.pid==0'
                            type='text'
                            icon='el-icon-edit'
                            class='green'
                            @click='handleAdd(scope.$index, scope.row)'
                        >添加
                        </el-button>
                        <el-button
                            v-if='scope.row.id!=0'
                            type='text'
                            icon='el-icon-edit'
                            class='yellow'
                            @click='handleEdit(scope.$index, scope.row)'
                        >编辑
                        </el-button>
                        <el-button
                            v-if='scope.row.id!=0'
                            type='text'
                            icon='el-icon-reading'
                            @click='handleDetail(scope.$index, scope.row)'
                        >详情
                        </el-button>
                        <el-button
                            v-if='scope.row.id!=0'
                            type='text'
                            icon='el-icon-delete'
                            class='red'
                            @click='handleDelete(scope.$index, scope.row)'
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <add-menu ref='addMenuDialog' @init-menu-table='initMenuTable'></add-menu>
        <update-menu ref='updateMenuDialog' @init-menu-table='initMenuTable'></update-menu>
        <detail-menu ref='detailMenuDialog' @init-menu-table='initMenuTable'></detail-menu>

    </div>
</template>

<script>
import addMenu from './AddMenu';
import updateMenu from './UpdateMenu';
import detailMenu from './DetailMenu';

export default {
    components: {
        addMenu,
        updateMenu,
        detailMenu
    },
    data() {
        return {
            tableData: [],
            multipleSelection: []//多选值
        };
    },
    mounted() {
        this.global.saveFunLog(this.global.FUN_LOG_ENUM.MENU_MAN);
        this.initMenuTable();
    },
    methods: {
        // 初始化树
        initMenuTable() {
            this.$http.get('/authserver/menuController/selectAllMenus.json').then(res => {
                console.log(res);
                if (res.data.status) {
                    this.tableData = res.data.data;
                }
                console.log(this.tableData);
            });
        },
        //选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //新增点击操作
        handleAdd(index, row) {
            if (row.pid != null && row.pid != '0') {
                this.$message.error('不支持添加三级菜单！');
                return;
            }
            //调用自组件方法
            this.$nextTick(() => {
                this.$refs.addMenuDialog.init(row.id);
            });
        },
        //更新点击操作
        handleEdit(index, row) {
            if (row.id === '0') {
                this.$message.error('根目录不可编辑！');
                return;
            }
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.updateMenuDialog.init(row.id);
            });
        },
        //详情点击操作
        handleDetail(index, row) {
            console.log(row);
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.detailMenuDialog.init(row.id);
            });
        },
        //删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const ids = new Array();
                    ids.push(row.id);
                    this.$http.post('/authserver/menuController/deleteMenuByIds.json', ids).then(res => {
                        if (res.data.status) {
                            this.$message.success('删除成功');
                            this.initMenuTable();
                        }
                    });
                });
        },
        //批量删除操作
        handleBatchDelete() {
            const length = this.multipleSelection.length;
            if (length < 1) {
                this.$message.error('请至少选择一个菜单');
            }
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const length = this.multipleSelection.length;
                    const ids = new Array();
                    for (let i = 0; i < length; i++) {
                        ids.push(this.multipleSelection[i].id);
                    }
                    this.$http.post('/authserver/menuController/deleteMenuByIds.json', ids).then(res => {
                        if (res.data.status) {
                            this.$message.success('删除成功');
                            this.initMenuTable();//重新请求赋值
                        }
                    });
                })
                .catch(() => {
                    this.$message.error(res.data.msg);
                });
        }
    }
};
</script>

<style scoped>

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.green {
    color: #67C23A;
}
</style>
